<template>
	<view class="tab_bar">
		<view class="tab_bar_item" v-for="item in tabBar" :key="item.id" @click="changeTabBar(item)"
			:class="isActive==item.id?'active':''">
			<image :src="isActive==item.id?item.imageActiveSrc:item.imageSrc" mode="heightFix"></image>
			<view class="name">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabBar",
		props: ["isActive"],
		data() {
			return {
				tabBar: [{
					id: 4,
					name: "返回",
					imageSrc: require("../../../static/shop/img/nav/back.png"),
					imageActiveSrc: require("../../../static/shop/img/nav/back_active.png"),
					path: "/pages/tabbar/home",
					isTabbarPage:true
				}, {
					id: 1,
					name: this.$t('tabBar.Shop'),
					imageSrc: require("../../../static/shop/img/nav/index.png"),
					imageActiveSrc: require("../../../static/shop/img/nav/index_chose.png"),
					path: "/pages/shop/index/index",
					isTabbarPage:false
				}, {
					id: 2,
					name: this.$t('tabBar.Car'),
					imageSrc: require("../../../static/shop/img/nav/shopping.png"),
					imageActiveSrc: require("../../../static/shop/img/nav/shopping_chose.png"),
					path: "/pages/shop/shoppingCart/shoppingCart",
					isTabbarPage:false
				}, {
					id: 3,
					name: this.$t('tabBar.My'),
					imageSrc: require("../../../static/shop/img/nav/mine.png"),
					imageActiveSrc: require("../../../static/shop/img/nav/mine-chose.png"),
					path: "/pages/shop/mine/mine",
					isTabbarPage:false
				}, ],
			};
		},
		methods: {
			changeTabBar(item) {
				if(item.isTabbarPage){
					uni.reLaunch({
						url: item.path
					})
					return
				}
				uni.redirectTo({
					url: item.path
				})
				// let pages = getCurrentPages();
				// let route = pages[pages.length - 1].route;
				// if (route == item.path) {
				// 	return
				// } else {

				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab_bar {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		background: #fff;

		.tab_bar_item {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;

			uni-image {
				height: 50rpx;
			}

		}
	}
</style>